<script lang="tsx" setup>
/**
 * 产量达成率
 */
import {nextTick, onMounted, onUnmounted, ref, watch} from "vue"
import Scrollable from "@/frame/utils/scrollable"

/**
 * 定义props
 */
const props = defineProps<{
  productionTaskProgressData: any
}>()

/**
 * 列表数据
 */
const list: any = ref([])

/**
 * 滚动列表实例
 */
const scrollInstance = ref()
const scrollFatherRef = ref()

/**
 * 获取数据
 */
const getData = () => {
  list.value = [
    {
      code: "Z250429019",
      goodsCode: "02.01.0567",
      plan: 4500,
      progress: 562
    },
    {
      code: "Z250429020",
      goodsCode: "02.01.0624",
      plan: 4632,
      progress: 652
    },
    {
      code: "Z250429021",
      goodsCode: "02.01.0624",
      plan: 4620,
      progress: 546
    },
    {
      code: "Z250429022",
      goodsCode: "02.01.0561",
      plan: 5625,
      progress: 685
    },
    {
      code: "Z250429023",
      goodsCode: "02.01.0567",
      plan: 4500,
      progress: 576
    },
    {
      code: "Z250429024",
      goodsCode: "02.01.0570",
      plan: 4500,
      progress: 588
    },
    {
      code: "Z250429025",
      goodsCode: "02.01.0570",
      plan: 4325,
      progress: 543
    },
    {
      code: "Z250429026",
      goodsCode: "02.01.0561",
      plan: 4500,
      progress: 562
    },
    {
      code: "Z250429027",
      goodsCode: "02.01.0729",
      plan: 4865,
      progress: 632
    },
    {
      code: "Z250429028",
      goodsCode: "02.01.0573",
      plan: 6845,
      progress: 955
    }
  ]
  setTimeout(() => {
    initScroll()
  }, 5000)
}
getData()

/**
 * 初始化滚动
 */
const initScroll = () => {
  if (scrollInstance.value) {
    scrollInstance.value.dispose()
  }
  const scrollElement = scrollFatherRef.value.querySelector(".list")
  if (!scrollElement) {
    return
  }
  scrollInstance.value = new Scrollable({
    interval: 5000,
    containerEl: scrollFatherRef.value,
    scrollEl: scrollElement,
    listEl: scrollElement,
    mode: "item",
    continuous: true
  })
  scrollInstance.value.init()
}

/**
 * 监视
 */
watch(() => props.productionTaskProgressData, (newValue) => {
  if (newValue) {
    nextTick(() => {
    })
  }
}, {
  deep: true,
  immediate: true
})
</script>

<template>
  <div class="production-task-progress">
    <div class="title-box">
      <div class="title-img">
        <img alt="" class="title-img-logout" src="/img/data-cockpit/item-title.png"/>
      </div>
      <div class="title">
        <div class="title-content">生产任务进度</div>
      </div>
    </div>
    <div class="table">
      <div class="table-header">
        <div class="td">
          任务单号
        </div>
        <div class="td">
          产品编号
        </div>
        <div class="td">
          生产进度
        </div>
      </div>
      <div ref="scrollFatherRef" class="table-body">
        <div class="list">
          <div v-for="(item,index) in list" :key="index" class="row">
            <div class="td">{{ item.code }}</div>
            <div class="td">{{ item.goodsCode }}</div>
            <div class="td">
              <el-progress
                  :percentage="(item.progress / (item.plan || 1)) * 100 > 100 ? 100 : (item.progress / (item.plan || 1)) * 100"
                  :show-text="false"/>
              <div class="progress-text">
                {{ ((item.progress / (item.plan || 1)) * 100).toFixed(2) }}%
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped src="./index.scss">

</style>